<template>
    <div class="app-container">
        <el-row :gutter="20">
            <!--科室数据-->
            <el-col :span="4" :xs="20" style="border-right-style: solid;border-width: 1px">
                <div class="head-container">
                    <el-input v-model="deptName" placeholder="请输入科室账号" clearable size="small"
                              prefix-icon="el-icon-search" style="margin-bottom: 20px"/>
                </div>
                <div class="head-container">
                    <el-tree :data="deptOptions" :props="defaultProps" :expand-on-click-node="false"
                             :filter-node-method="filterNode" ref="tree" node-key="id" default-expand-all
                             highlight-current @node-click="handleNodeClick"/>
                </div>
            </el-col>
            <!--学生数据-->
            <el-col :span="20" :xs="24">
                <div style="padding-left: 100px;width: 76%">
                    <el-form ref="form" :model="form" :rules="rules" label-width="80px" label-position="top">
                        <el-form-item label="考试时间" prop="allotDate">
                            <el-select v-model="form.allotDate" placeholder="请选择考试时间" clearable>
                                <el-option v-for="item in getRange()" :key="item" :label="item" :value="item"/>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="学生" prop="userIds">
                            <el-transfer v-loading="loading" v-model="form.userIds" :data="userList"
                                         filterable :filter-method="filterMethod" filter-placeholder="请输入城市拼音"
                                         :titles="['已选择', '未选择']" :button-texts="['取消分配', '选择分配']"/>
                        </el-form-item>
                        <el-form-item>
                            <div style="float:right;margin-right: 22px;">
                                <el-button type="primary" @click="doAllot">确认分配</el-button>
                            </div>
                        </el-form-item>
                    </el-form>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>

import Treeselect from "@riophae/vue-treeselect";
import {deptTreeSelect} from "@/api/system/user";
import {allot_users, get_appoint_user_ids} from "@/api/ex/ex_record";
import {listStudent} from "@/api/system/student";
import {getRangeDay} from "@/utils/zzDouUtils/dateUtil";
import {contain} from "@/utils/zzDouUtils/arrayUtil";

export default {
    name: "Ex_record",
    components: {Treeselect},
    props: {
        //考试
        exam: {
            type: Object,
        },
    },
    data() {
        return {
            // 科室账号
            deptName: undefined,
            // 科室树选项
            deptOptions: undefined,
            defaultProps: {
                children: "children",
                label: "label"
            },
            loading: false,
            userList: [],
            appointUserIds: [],
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 1000,
                deptId: null,
            },
            form: {
                allotDate: null,
                userIds: [],
            },
            rules: {
                allotDate: [
                    {required: true, message: "请选择考试时间", trigger: "blur"},
                ],
                userIds: [
                    {type: 'array', required: true, message: "请选择学生", trigger: "blur"}
                ],
            }
        };
    },
    watch: {
        // 根据账号筛选科室树
        deptName(val) {
            this.$refs.tree.filter(val);
        }
    },
    created() {
        this.getUserList();
        this.getDeptTree();
    },
    methods: {
        /** 查询学生列表 */
        async getUserList() {
            this.loading = true;
            await this.getUseridsByExam();
            await listStudent(this.queryParams).then(response => {
                    this.userList = response.rows.map(item => {
                        const d = contain(this.appointUserIds, item.userId);
                        return {
                            key: item.userId,
                            label: d ? item.nickName + '（已分配）' : item.nickName,
                            disabled: d
                        }
                    });
                    this.loading = false;
                }
            );
        },
        /** 根据考试查询已报名的用户 */
        getUseridsByExam() {
            get_appoint_user_ids(this.exam.id).then(response => {
                this.appointUserIds = response.rows;
            })
        },
        /** 查询科室下拉树结构 */
        getDeptTree() {
            deptTreeSelect().then(response => {
                this.deptOptions = response.data;
            });
        },
        // 筛选节点
        filterNode(value, data) {
            if (!value) return true;
            return data.label.indexOf(value) !== -1;
        },
        // 节点单击事件
        handleNodeClick(data) {
            this.queryParams.deptId = data.id;
            this.getUserList();
        },
        /** 返回时间范围内的所有天 */
        getRange() {
            return getRangeDay(new Date(this.exam.startTime), new Date(this.exam.endTime));
        },
        /** 穿梭框搜索 */
        filterMethod(query, item) {
            return item.label.indexOf(query) > -1;
        },
        /** 分配 */
        doAllot() {
            this.$refs["form"].validate(valid => {
                if (valid) {
                    this.form['examId'] = this.exam.id.el-transfer-
                    allot_users(this.form).then(response => {
                        this.form = {allotDate: null, userIds: []};
                        this.$modal.msgSuccess("分配完成");
                        this.getUserList();
                    })
                }
            });
        }
    }
};
</script>
<style>
.el-transfer-panel {
    width: 200px;
    height: 500px;
}

.el-transfer-panel__list.is-filterable {
    height: 400px;
}
</style>
